<template>
  <div>
    <el-button style="margin-bottom: 30px;" type="primary" @click="toAdd">添加视频</el-button>
    <el-table stripe border :data="videoList">
        <el-table-column label="视频名称" prop="Vname"></el-table-column>
        <el-table-column label="视频时长" prop="Vtime"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
                <el-link @click="toDel(scope.row._id)" type="danger">删除</el-link>
            </div>
          </template>
        </el-table-column>
    </el-table>
    <!-- 添加视频的弹出层 -->
    <el-dialog title="目录添加视频" width="50%" :visible.sync="addFlag" >   
          <video-com :btnCtrl="true"></video-com>
    </el-dialog>
  </div>
</template>

<script>
import videoCom from '../../Video/index.vue'
import {getDirVideo,delDirVideo} from '../../../api/course'
export default {
  name: 'JsxyCourseDirVideo',
  components:{videoCom},
  data() {
    return {
      addFlag:false,
      dir_id:'',
      videoList:[]//目录下的视频列表
    };
  },
  created(){
    // 接收选中目录后 传来的id
    this.$bus.$on('sendDirId',val=>{
      this.dir_id=val;
      this.getVideo()//获取目录下视频
    })
    // 监听添加后兄弟组件传来的最新的视频列表
    this.$bus.$on("sendList",(val)=>{
      this.videoList=val;
    })
  },
  mounted() {
    
  },

  methods: {//删除目录下的视频接口
   async  toDel(_id){
    let res=await delDirVideo({
        CDid:this.$route.query._id,//课程的_id
        _id:this.dir_id,//目录的_id
        Vid:_id//视频的_id
    })
      console.log(res)
      if(res.data.success){
        this.$message.success("删除成功")
        // 重新获取当前目录下的视频
        this.getVideo();
      }
   },
    async getVideo(){ //获取目录下视频接口
      let res=await getDirVideo({
        CDid:this.$route.query._id,//课程_id
        _id:this.dir_id//目录的_id
      });
      console.log(res)
      this.videoList=res.data.data.list;
    },
    toAdd(){
      this.addFlag=true;
    }
  },
};
</script>